<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        body {
            padding: 20px 20px;
            background-color: #f2f3f5;
        }

        .hed {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #form-add,
        #form-edit {
            padding-top: 20px;
            padding-right: 30px;
        }
    </style>
</head>

<body>
    <!-- 卡片区域 -->
    <div class="layui-card">
        <div class="layui-card-header hed">
            <span>文章类别管理</span>
            <button class="layui-btn layui-btn-normal layui-btn-sm" id="btnAddCate">添加类别</button>
        </div>
        <!-- 表格数据 -->
        <div class="layui-card-body">
            <table class="layui-table">
                <colgroup>
                    <col>
                    <col>
                    <col width="200">
                </colgroup>
                <thead>
                    <tr>
                        <th>分类名称</th>
                        <th>分类别名</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <script type="text/html" id="tpl-table">
                        {{each data}}
                        <tr>
                            <td>{{$value.name}}</td>
                            <td>{{$value.alias}}</td>
                            <td>
                                <button class="layui-btn layui-btn-xs btn-edit" data-id="{{$value.id}}">编辑</button>
                                <button class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="{{$value.id}}">删除</button>
                            </td>
                        </tr>
                        {{/each}}
                    </script>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 修改文章分类弹出层 -->
    <script type="text/html" id="dialong-edit">
        <form class="layui-form" id="form-edit" lay-filter="form-edit">
            <!-- 隐藏id -->
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" required placeholder="请输入分类名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" lay-verify="required" required placeholder="请输入分类名称" autocomplete="off" class="layui-input">
    
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
                </div>
            </div>
        </form>
    </script>
    <!-- 添加分类的弹出层 -->
    <script type="text/html" id="dialog-add">
    <form class="layui-form" id="form-add">
      <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
          <input type="text" name="name" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">分类别名</label>
        <div class="layui-input-block">
          <input type="text" name="alias" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>
  </script>

</body>

</html>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.6.1.min.js"></script>
<script src="../js/template-web.js"></script>
<script>
    var layer = layui.layer;
    var form = layui.form;
    //获取文章分类列表
    function getArtCateList() {
        $.ajax({
            type: 'get',
            url: '/my/article/cates',
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            success: (res) => {
                let htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr);
            }
        })
    }
    getArtCateList();
    //修改文章分类弹出层
    var indexEdit = null;
    $('tbody').on('click', '.btn-edit', function () {
        //弹出
        indexEdit = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#dialong-edit').html()
        })
        //
        //获取id
        var id = $(this).attr('data-id')
        $.ajax({
            type: 'get',
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            url: '/my/article/cates' + id,
            success: (res) => {
                form.val('form-edit', res.data[0])
            }
        })

    })

    //

    // 通过代理的形式，为修改分类的表单绑定 submit 事件
    $('body').on('submit', '#form-edit', function (e) {
        e.preventDefault()
        console.log($(this).serialize())
        $.ajax({
            method: 'POST',
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            url: '/my/article/updatecate',
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('更新分类数据成功！')
                layer.close(indexEdit)
                getArtCateList()
            }
        })
    })
    // 通过代理的形式，为删除按钮绑定点击事件
    $('tbody').on('click', '.btn-delete', function () {
        var id = $(this).attr('data-id')
        // 提示用户是否要删除
        layer.confirm('确认删除?', { icon: 3, title: '提示' }, function (index) {
            $.ajax({
                method: 'GET',
                url: '/my/article/deletecate/' + id,
                headers: {
                    'Authorization': localStorage.getItem('token')
                },
                success: function (res) {

                    if (res.status !== 0) {
                        return layer.msg('删除分类失败！')
                    }
                    layer.msg('删除分类成功！')
                    layer.close(index)
                    getArtCateList()
                }
            })
        })
    })
    //
    // 为添加类别按钮绑定点击事件
    var indexAdd = null
    $('#btnAddCate').on('click', function () {
        indexAdd = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#dialog-add').html()
        })
    })
    // 通过代理的形式，为 form-add 表单绑定 submit 事件
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault()
        $.ajax({
            method: 'POST',
            url: '/my/article/addcates',
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                getArtCateList()
                layer.msg(res.message)
                // 根据索引，关闭对应的弹出层
                layer.close(indexAdd)
            }
        })
    })
</script>